<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form" @keyup.enter.native="searchQuery">
        <a-row :gutter="10" v-show="categoryType=='1'">
          <a-col :md="12" :sm="12">
            <a-form-item :label="$t('m.system.dict.entity.itemText')">
              <a-input style="width: 160px;" placeholder="" v-model="queryParam.itemText"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
                 <span style="float: right;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">{{ $t('m.common.button.query') }}</a-button>
                <a-button type="default" @click="searchReset" icon="reload"  style="margin-left: 8px">{{ $t('m.common.button.reset') }}</a-button>
              </span>
            <!--<a-form-item label="状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select
                placeholder="请选择"
                v-model="queryParam.status"
              >
                <a-select-option value="1">正常</a-select-option>
                <a-select-option value="0">禁用</a-select-option>
              </a-select>
            </a-form-item>-->
          </a-col>
        </a-row>

        <a-row>
          <a-col :md="2" :sm="24">
            <a-button style="margin-bottom: 10px" type="primary" icon="plus" @click="handleAdd" :disabled="!this.dictId">{{ $t('m.common.button.add') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-table
        ref="table"
        rowKey="id"
        size="middle"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >

          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">{{ $t('m.common.button.update') }}</a>
            <a-divider type="vertical"/>
            <a-popconfirm :title="$t('m.common.tip.delete_confirm')" @confirm="() => handleDelete(record.id)">
              <a>{{ $t('m.common.button.delete') }}</a>
            </a-popconfirm>
          </span>

      </a-table>
    </div>
    <dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
  </div>
</template>

<script>

  import {filterObj} from '@/utils/util';
  import DictItemModal from './modules/DictItemModal'
  import {YcListMixin} from '@/mixins/YcListMixin'
  import { deleteAction, getAction,downFile,getFileAccessHttpUrl } from '@/api/manage'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: "DictItemList",
    mixins: [YcListMixin],
    components: {DictItemModal},
    props:{
      categoryType: {
        type: String,
        default: '1'
      }
    },
    data() {
      return {
        columns: [
          {
            title: this.$t('m.system.dict.entity.itemText'),
            align: "center",
            dataIndex: 'itemText',
          },
          {
            title: this.$t('m.system.dict.entity.itemValue'),
            align: "center",
            dataIndex: 'itemValue',
          },
          {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        queryParam: {
          dictId: "",
          dictName: "",
          itemText: "",
          delFlag: "1",
          status: [],
        },
        title: "操作",
        visible: true,
        screenWidth: 800,
        model: {},
        dictId: "",
        status: 1,
        labelCol: {
          xs: {span: 5},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 12},
          sm: {span: 12},
        },
        form: this.$form.createForm(this),
        validatorRules: {
          itemText: {rules: [{required: true, message:this.$t('m.system.dict.verify.itemText')}]},
          itemValue: {rules: [{required: true, message: this.$t('m.system.dict.verify.itemValue')}]},
        },
        url: {
          list: YchConstant.PREFIX_SYSTEM + "/dictItem/list",
          delete: YchConstant.PREFIX_SYSTEM + "/dictItem/delete",
          deleteBatch: YchConstant.PREFIX_SYSTEM + "/dictItem/deleteBatch",
        },
      }
    },
    created() {
      // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
      this.resetScreenSize();
    },
    methods: {
      loadData(arg) {
        if(!this.url.list){
          this.messageUtil.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        if(!params.dictId || params.dictId==''){
          return;
        }
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }
          if(res.code===510){
            this.messageUtil.warning(res.message)
          }
          this.loading = false;
        })
      },


      add(dictId) {
        this.dictId = dictId;
        this.edit({});
      },
      edit(record) {
        if (record.id) {
          this.dictId = record.id;
        }else {
          this.dictId = null;
          this.onClose();
          return;
        }
        this.queryParam = {}
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.model.dictId = this.dictId;
        this.model.status = this.status;
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(this.lodash.pick(this.model, 'itemText', 'itemValue'))
        });
        // 当其它模块调用该模块时,调用此方法加载字典数据
        this.loadData();
      },

      getQueryParams() {
        var param = Object.assign({}, this.queryParam);
        param.dictId = this.dictId;
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        if (this.superQueryParams) {
          param['superQueryParams'] = encodeURI(this.superQueryParams)
          param['superQueryMatchType'] = this.superQueryMatchType
        }
        return filterObj(param);
      },

      // 添加字典数据
      handleAdd() {
        this.$refs.modalForm.add(this.dictId);
        this.$refs.modalForm.title = "新增";
      },
      showDrawer() {
        this.visible = true
      },
      onClose() {
        this.form.resetFields();
        this.dataSource = [];
        this.ipagination.total = 0;
      },
      // 抽屉的宽度随着屏幕大小来改变
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 600) {
          this.screenWidth = screenWidth;
        } else {
          this.screenWidth = 600;
        }
      },
    }
  }
</script>
